<template>
    <div ref="appContainer" class="app-container">
        <ListFilter :gutter="20" :span="4" :filter-list="filterList" :list-query="extraQuery" @refreshList="getList" />
        <div class="tool-container">
            <el-button class="tool-btn" type="warning" :disabled="disableDels" icon="el-icon-delete" v-permission="'Del'" @click="handleDeletes()">{{ $t('global.del') }}</el-button>
            <el-button class="tool-btn" type="primary" :disabled="!disableDels" icon="el-icon-plus" v-permission="'Insert'" @click="handleCreate()">{{ $t('global.insert') }}</el-button>
        </div>
        <div class="table-container">
            <div class="table-area">
                <el-table v-loading="listLoading" :key="1" :data="list" border @selection-change="tableSelect">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column type :label="$t('global.operate')" align="center" width="90">
                        <template slot-scope="{row}">
                            <el-button class="table-btn" icon="el-icon-edit" v-permission="'Update'" @click.stop="handleEdit(row)">{{ $t('global.edit') }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('global.sort')" width="90px" align="center" :prop="sortName">
                        <template slot-scope="{row}">
                            <div @click.stop="">
                                <el-input v-model="row[sortName]" type="number" class="table-input" :disabled="!$clickAuth('Update')" @change="updateSort(row, $event)" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="标题" min-width="240px" header-align="center" align="center" show-overflow-tooltip prop="brandTitle" />
                    <el-table-column label="简介" min-width="200px" header-align="center" align="center" show-overflow-tooltip prop="brandIntro" />
                    <el-table-column label="添加时间" width="200" align="center" prop="brandAddTime" />
                </el-table>

                <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
            </div>
        </div>
    </div>
</template>

<script>
import TableList from '@/mixin/TableList'
import { languageList } from '@/utils/data/statusData'
import {
    brandSearch as listSearch,
    brandDeleteIds as listDelete,
    brandUpdate as listUpdate
} from '@/api/brand'
import { toLine } from '@/utils'
import { mapGetters } from 'vuex'

export default {
    name: 'ContentNews',
    mixins: [TableList], // 基础列表参数
    data() {
        return {
            languageList,
            languageVersion: 1,
            extraQuery: {}, // 额外查询参数
            itemId: 'brandId', // 列表id
            sortName: 'brandSort', // 排序字段
            classify: []
        };
    },
    computed: {
        ...mapGetters([
            'language'
        ]),
        // 语言版本对应
        versionStr: {
            get() {
                return languageList.find(item => item.value == this.languageVersion)[this.language == 'zh' ? 'label' : 'labelEn']
            },
            set(newValue) {
                this.languageVersion = languageList.find(item => item[this.language == 'zh' ? 'label' : 'labelEn'] == newValue).value
            }
        },
        // 固定查询参数
        fixedQuery() {
            return {
                field: toLine(this.sortName),
                sort: 'ASC'
            }
        },
        filterList() {
            return [
                { name: 'brandTitle', tips: '标题' },
                { name: 'brandTitleEn', tips: '英文标题' }
            ]
        }
    },
    created() {
    },
    activated() {
        this.listLoading = false
        this.getList();
    },
    methods: {
        listSearch,
        listDelete,
        listUpdate
    }
};
</script>
<style lang="scss" scoped></style>
